<template>
    <div>
       <Row type="flex" justify="space-between" align="middle">
            <Col span="15" class="title">菜单列表</Col>
            <Col span="9" :style="{textAlign: 'right'}">
                <Button icon="md-add" @click="addMenu">添加菜单</Button>
                <Button type="default" @click="clickOrderBtn">排序</Button>
            </Col>
       </Row>
       <div class="table-box">
           <Table width="100%" :height="height" border :columns="columns" :data="data" :loading="loading"></Table>
       </div>
    </div>
</template>
<script>
    export default {
        data () {
            var height = this.$util.getClientHeight()-64-51-30-58-15;

            // 菜单类型
            var menuType = this.$fieldType.menuType;
            // 禁用类型
            var enableType = this.$fieldType.enableType;
            var that = this;

            return {
                loading: true,
                height: height,
                indexObj: {},
                columns: [
                    {
                        title: '排序',
                        key: 'listorder',
                        width: 80,
                        render: (h, params) => {
                            var flag = params.row.flag ? 0 : 1;
                            var input = [
                                h('Input', {
                                    props: {
                                        size: 'small',
                                        value: params.row.listorder
                                    },
                                    on: {
                                        input: (val)=>{
                                            var item = {};
                                            item.listorder = parseInt(val);
                                            item.id = params.row.id;
                                            that.indexArrAdd(item);
                                        }
                                    }
                                }, '')];
                            return h('div', input);
                        }
                    },
                    {
                        title: 'ID',
                        key: 'id',
                        width: 70
                    },
                    {
                        title: '名称',
                        key: 'Xname',
                        width: 150
                    },
                    {
                        title: 'URL',
                        key: 'url',
                        width: 150
                    },
                    {
                        title: '类型',
                        key: 'type',
                        width: 100,
                        render: (h, params) => {
                            var type = params.row.type;
                            return h('span', menuType[type]);
                        }
                    },
                    {
                        title: '状态',
                        key: 'flag',
                        width: 70,
                        render: (h, params) => {
                            var flag = params.row.flag;
                            return h('span', enableType[flag]);
                        }
                    },
                    {
                        title: '创建者',
                        key: 'creator_name',
                        width: 100
                    },
                    {
                        title: '创建时间',
                        key: 'create_time',
                        width: 170
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 250,
                        render: (h, params) => {
                            var flag = params.row.flag ? 0 : 1;
                            var buttonAction = [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: ()=>{
                                            that.editMenu(params);
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: ()=>{
                                            that.enableMenu(params.row);
                                        }
                                    }
                                }, enableType[flag]),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: ()=>{
                                            that.delMenu(params.row);
                                        }
                                    }
                                }, '删除')
                                ];
                            if(params.row.type === 0){
                                buttonAction.push(h('Button', {
                                                    props: {
                                                        type: 'default',
                                                        size: 'small'
                                                    },
                                                    on: {
                                                        click: ()=>{
                                                            // 启用菜单才能添加子菜单
                                                            if(params.row.flag === 1){
                                                                var parentId = params.row.id;
                                                                this.$router.push({
                                                                            path: '/admin/addMenu',
                                                                            query: {
                                                                                parentId: parentId
                                                                            }
                                                                        });
                                                            } else {
                                                                that.$Message.info('只有菜单为启用状态时才能添加子菜单！');
                                                            }
                                                        }
                                                    }
                                                }, '添加子菜单'));
                            }

                            return h('div', buttonAction);
                        }
                    }
                ],
                data: []
            }
        },
        created: function () {
            // 获取菜单列表信息
            this.getMenuList();
        },
        methods: {
            // 获取菜单所有信息列表
            getMenuList(){
                var that = this;
                that.$util.ajax({
                    that: that,
                    url: '/menu/menulist/',
                    success: function(data){
                        that.data = that.handleMenuList(data.data);
                        that.loading = false;
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    }
                })
            },
            // 处理返回的菜单列表
            handleMenuList(data){
                var menuData = [];

                // 提取顶级菜单
                menuData = foreachData(data);

                // 处理数据
                function foreachData(data){
                    var dataList = [];
                    var i;

                    for(i=0; i<data.length; i++){
                        var item = data[i];
                        if(item.parent_id === 0){
                            item.Xname = item.name;
                            dataList.push(item);
                            data.splice(i, 1);
                            i--;
                            dataList = dataList.concat(travData(data, item.id));
                        }
                    }

                    // 遍历杂乱tree结构数组处理成并列挨着排列的数组
                    function travData(jData, id, z=1) {
                        var dataList = [];
                        for(var j=0; j<jData.length; j++){
                            var item = jData[j];
                            var space = '';
                            if(item.parent_id ===id){

                                for(var m=0; m<z; m++){
                                    space = space + '---';
                                }

                                item.Xname = space + item.name;
                                dataList.push(item);
                                jData.splice(j, 1);
                                j--;
                                if(j<i){
                                    i--;
                                }
                                dataList = dataList.concat(travData(jData, item.id, z+1));
                            }
                        }
                        return dataList;
                    }
                    return dataList;
                }

                return menuData;
            },
            // 启用、禁用菜单
            enableMenu(data){
                var that = this;
                that.$loading.show('更新中');
                that.$util.ajax({
                    that: that,
                    url: '/menu/enable/',
                    data: {
                        id: data.id,
                        flag: data.flag ? 0:1
                    },
                    success: function(data){
                        that.$Message.info('操作成功！');
                        that.getMenuList();
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    },
                    complete: function(){
                        that.$loading.hide();
                    }
                });
            },
            // 删除菜单
            delMenu (data){
                var that = this;
                that.$loading.show('更新中');
                that.$util.ajax({
                    that: that,
                    url: '/menu/del/',
                    data: {
                        id: data.id
                    },
                    success: function(data){
                        that.$Message.info('删除成功！');
                        that.getMenuList();
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    },
                    complete: function(){
                        that.$loading.hide();
                    }
                })
            },
            // 编辑菜单
            editMenu(params){
                this.$router.push({
                                    path: '/admin/editMenu',
                                    query: params.row
                                });
            },
            // 添加菜单
            addMenu(){
                this.$router.push({
                                    path: '/admin/addMenu',
                                    query: {
                                        parentId: 0
                                    }
                                });
            },
            // 添加修改排序
            indexArrAdd(item){
                var indexObj = this.indexObj
                if(indexObj[item.id]){
                    indexObj[item.id]['listorder'] = isNaN(item.listorder)?0:item.listorder;
                } else {
                    indexObj[item.id] = item;
                }
            },
            // 点击排序按钮
            clickOrderBtn(){
                var indexObj = this.indexObj;
                var indexArr = [];
                var that = this;

                Object.keys(indexObj).forEach(function(key){
                    indexArr.push(indexObj[key]);
                });
                if(indexArr.length === 0){
                    that.$Message.info('请先修改排序，在提交排序！');
                    return;
                }

                that.$loading.show('更新中');
                that.$util.ajax({
                    that: that,
                    url: '/menu/order/',
                    data: indexArr,
                    success: function(data){
                        that.$Message.info(data.msg);
                        that.indexObj = {};
                        that.getMenuList();
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    },
                    complete: function(){
                        that.$loading.hide();
                    }
                })
            }
        }
    }
</script>
<style scoped>
</style>